<script setup>
import FluxLineChart from "@/views/chart/FluxLineChart.vue";
import AirLineChart from "@/views/chart/AirLineChart.vue";
import PMLineChart from "@/views/chart/PMLineChart.vue";
import CO2LineChart from "@/views/chart/CO2LineChart.vue";
import MeteorologyLineChart from "@/views/chart/MeteorologyLineChart.vue";
import MeteorologicalData from "@/views/chart/MeteorologyBySingleTime.vue";
import WindData from "@/views/chart/WindBySingleTime.vue";
import DeviceStatus from "@/views/chart/DeviceStatus.vue";
import DataDistributionPie from "@/views/chart/DataDistributionPie.vue";
import DataUploadChartSlideShowTable from "@/views/chart/DataUploadChartSlideShowTable.vue";
import BaiDuMap from "./chart/BaiDuMap.vue";
import WordCloud from "@/views/chart/WordCloud.vue";
import CarouselImage from "@/views/chart/CarouselImage.vue";
import SifLineChart from "./chart/SifLineChart.vue";
</script>

<template>
  <!-- 屏幕主要显示功能区 -->
  <div class="container">
    <!-- 左侧功能区 -->
    <div class="container-left">
      <div class="container-left-header">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <WindData
            style="
              display: flex;
              flex-direction: column;
              height: 100%;
              width: 100%;
            "
          ></WindData>
        </dv-border-box-10>
      </div>
      <div class="container-left-middle">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <CarouselImage
            style="width: 90%; height: 95%; padding-top: 1.5%"
          ></CarouselImage>
        </dv-border-box-10>
      </div>
      <div class="container-left-footer">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <DeviceStatus
            style="width: 95%; height: 90%; margin-left: 3%"
          ></DeviceStatus>
        </dv-border-box-10>
      </div>
    </div>
    <!-- 中间功能区 -->
    <div class="container-middle">
      <!-- 用于设置echarts元素的-->
      <div class="container-middle-top">
        <dv-border-box-10>
          <BaiDuMap style="width: 100%; height: 100%"></BaiDuMap>
        </dv-border-box-10>
      </div>
      <div class="container-middle-bottom">
        <div class="container-middle-bottom-left">
          <dv-border-box-7
            :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.8)']"
          >
            <DataDistributionPie
              style="width: 100%; height: 100%"
            ></DataDistributionPie>
          </dv-border-box-7>
        </div>
        <div class="container-middle-bottom-right">
          <dv-border-box-7>
            <DataUploadChartSlideShowTable
              style="width: 100%; height: 100%"
            ></DataUploadChartSlideShowTable>
          </dv-border-box-7>
        </div>
      </div>
    </div>
    <!-- 右侧功能区 -->
    <div class="container-right">
      <div class="container-right-top">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <AirLineChart style="height: 100%"></AirLineChart>
        </dv-border-box-10>
      </div>
      <div class="container-right-middle1">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <PMLineChart
            style="width: 100%; height: 100%"
          ></PMLineChart>
        </dv-border-box-10>
      </div>
      <div class="container-right-middle2">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <CO2LineChart style="width: 100%; height: 100%"></CO2LineChart>
        </dv-border-box-10>
      </div>
      <div class="container-right-bottom">
        <dv-border-box-10
          :color="['rgba(46, 134, 222,0.4)', 'rgba(245, 246, 250,0.6)']"
        >
          <WordCloud></WordCloud>
        </dv-border-box-10>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  .container-left {
    display: flex;
    flex-direction: column;
    width: 29%;
    .container-left-header {
      height: 35%;
      margin-bottom: 1%;
    }
    .container-left-middle {
      height: 40%;
      margin-bottom: 1%;
    }
    .container-left-footer {
      height: 24%;
    }
  }
  .container-middle {
    display: flex;
    flex-direction: column;
    width: 40%;
    padding: 0 1%;
    .container-middle-top {
      height: 68%;
    }
    .container-middle-bottom {
      height: 32%;
      margin-top: 1%;
    }
    .container-middle-bottom {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
      .container-middle-bottom-left {
        display: flex;
        width: 49%;
      }
      .container-middle-bottom-right {
        display: flex;
        width: 49%;
      }
    }
  }
  .container-right {
    display: flex;
    flex-direction: column;
    width: 29%;
    justify-content: space-between;
    .container-right-top {
      height: 25%;
    }
    .container-right-middle1 {
      height: 25%;
    }
    .container-right-middle2 {
      height: 25%;
    }
    .container-right-bottom {
      height: 24%;
    }
  }
}
</style>